<template>
    <el-dialog v-model="open" title="Export PI" width="68%" align="left" style="background-color: #f1f1f1;" draggable>
        <div style="width:90%; margin: 0 auto;">
            <el-radio-group v-model="radio">
                <el-radio :label="1">style1</el-radio>
                <el-radio :label="2">style2</el-radio>
                <el-radio :label="3">style3</el-radio>
                <el-radio :label="4">style4</el-radio>
                <el-radio :label="5">style5</el-radio>
            </el-radio-group>
        </div>

        <table border="1" style="width:90%; border-collapse:collapse;margin: 0 auto; border: 2px solid #000000;"
            class="export" id="exporttable">

            <tr v-if="radio === 1">
                <td align="center" colspan="5" style="color:blue; font-size: 26px;font-weight: bold; line-height: 1.5;">
                    KERNAL AUTOMATI CO LTD
                </td>
            </tr>
            <tr v-if="radio === 1" class="height">
                <td align="left" colspan="5"
                    style="text-align: left;color:blue; font-size: 22px;font-weight: bold;height:80px;">
                    Room 315, Building B, Jinguyuan, No. 6, Yumiao Road, Buji Street, Longgang District,
                    Shenzhen
                </td>
            </tr>
            <tr v-if="radio === 2" style="height: 100px;">
                <td colspan="5" align="center">
                    <img :src="imgList[0]" />
                </td>
            </tr>
            <tr v-if="radio === 3" style="height: 100px;">
                <td colspan="5" align="center">
                    <img :src="imgList[1]" />
                </td>
            </tr>
            <tr v-if="radio === 4" style="height: 100px;">
                <td colspan="5" align="center">
                    <img :src="imgList[2]" />
                </td>
            </tr>
            <tr v-if="radio === 5" style="height: 100px;">
                <td colspan="5" align="center">
                    <img :src="imgList[3]" />
                </td>
            </tr>
            <tr>
                <td align="center" colspan="5" style="font-size: 22px;font-weight: bold;">
                    COMMERCLAL INVOICE
                </td>
            </tr>
            <tr style="height: 26px;">
                <td align="right" style="text-align:right" colspan="5">Tracking numbers:UPS 1Z7XE7390495559663</td>
            </tr>
            <tr style="height: 26px;">
                <td align="center" style="width: 150px;">DATE:</td>
                <td style="text-align: left;width: 180px;">{{ utils.ftime(invoiceInfo.CreateTime) }}</td>
                <td style="width: 80px;"></td>
                <td style="width: 150px;text-align: center">Invoice NO:</td>
                <td style="text-align: left;width: 120px;">{{ invoiceInfo.PI_name }}</td>
            </tr>
            <tr style="height: 26px;">
                <td align="center" style="width: 150px;">ATTN:</td>
                <td colspan="4" style="text-align: left;">Nawfal EL IDRISSI</td>
            </tr>
            <tr style="height: 26px;">
                <td align="center" style="width: 150px;">Address:</td>
                <td colspan="4" align="left" style="text-align: left;height:50px;">
                    NRwell Lda Plano Parque Empresarial Armazem A113.3 Rua do Batel,10944484-253 Guilhabreu Portugal
                </td>
            </tr>
            <tr style="height: 26px;">
                <td align="center" style="width: 150px;">Company:</td>
                <td colspan="4" align="left" style="text-align: left;height:50px;"></td>
            </tr>
            <tr style="height: 26px;">
                <td rowspan="3" style="width: 150px;border-right: none;border-bottom: none;" align="center">number:</td>
                <td colspan="4" align="left" style="text-align: left;border-left: none;border-bottom: none;">
                    N.I.F:
                </td>
            </tr>
            <tr style="height: 26px;">
                <td colspan="4" style="text-align: left; border-left: none; border-bottom: none;border-top: none;">
                    EORI:
                </td>
            </tr>
            <tr style="height: 26px;">
                <td colspan="4" style="text-align: left; border-left: none; border-bottom: none;border-top: none;">
                    REX:
                </td>
            </tr>
            <tr style="height: 26px;">
                <td align="center" style="border-right: none;border-bottom: none;border-top: none;width: 150px;">E-mail
                    Address:</td>
                <td colspan="4" align="left" style="color:blue;text-align: left; border-left: none; border-left: none;">

                </td>
            </tr>
            <tr style="height: 26px;">
                <td align="center" style="border-right: none;border-bottom: none;border-top: none;width: 150px;">Tel:
                </td>
                <td colspan="4" align="left" style="text-align: left; border-left: none;">

                </td>
            </tr>
            <tr style="height: 26px;">
                <td align="center">Model No.</td>
                <td align="center">Commodity &description</td>
                <td align="center">Qty(PCS)</td>
                <td align="center">Unit Price(USD)</td>
                <td align="center">Amount(USD)</td>
            </tr>
            <tr style="height: 26px;" v-for="item in exportPImodels">
                <td align="center">{{ item.product_name_pi }}</td>
                <td align="center">{{ item.product_description_pi }}</td>
                <td align="center">{{ item.quantity }}</td>
                <td align="center">{{ utils.currencType('USD') + item.price }}</td>
                <td align="center">{{ utils.currencType('USD') + item.price }}</td>
            </tr>
            <tr style="height: 26px;">
                <td align="center"></td>
                <td align="center"></td>
                <td align="center">{{ capitalTotal.quantity_total }}</td>
                <td align="center"></td>
                <td align="center">{{ utils.currencType('USD') + capitalTotal.amount_total }}</td>
            </tr>
            <tr style="border-bottom: none;">
                <td colspan="5" style="border: none;height: 50px;text-align: left;">
                    {{ capitalTotal.capital }}
                </td>
            </tr>

            <tr style="border-top: none;">
                <td style="border: none;"></td>
                <td style="border: none;"></td>
                <td style="border: none;"></td>
                <td style="border: none;"></td>
                <td style="border-top: none;border-right: none;border-left: none;">Yolanda</td>
            </tr>
            <tr>
                <td style="border: none;"></td>
                <td style="border: none;"></td>
                <td style="border: none;"></td>
                <td style="border: none;"></td>
                <td style="border: none;">Yolanda</td>
            </tr>

        </table>
        <a download="PI" id="excelOut" href="#" rel="external nofollow"></a>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="exportFun" type="primary"
                    style="border:1px solid #6193D2;color:#ffffff">export</el-button>


                <el-button style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2"
                    @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'
import * as utils from "../../utils.js"
const prpos = defineProps({
    imgList: Object,
    exportPImodels: Object,
    invoiceInfo: Object,
    capitalTotal: Object,

})
const open = ref(false)
const radio = ref(1)
const dialogopen = () => {
    open.value = true
}
const closeWindow = () => {
    open.value = false
}
defineExpose(
    {
        open,
        dialogopen,
    }
)

const exportFun = () => {
    tableToExcel("exporttable", "PI");
}

//base64转码
const base64 = (s) => {
    return window.btoa(unescape(encodeURIComponent(s)));
}
//替换table数据和worksheet名字
const format = (s, c) => {
    return s.replace(/{(\w+)}/g, (m, p) => {
        return c[p];
    });
}

const tableToExcel = (tableid, sheetName) => {
    var uri = "data:application/vnd.ms-excel;base64,";
    var template =
        '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
        'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
        "<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>" +
        "</x:ExcelWorkbook></xml><![endif]-->" +
        ' <style type="text/css">' +
        'img{' +
        'width:600px' +
        'height:50px' +
        '}' +
        'table{' +
        "border: 1px solid #000000;" +
        "width:1200px" +
        '}' +
        "table td {" +
        "border: 1px solid #000000;" +
        "width: 120px;" +
        "height: 30px;" +
        "text-align: center;" +
        "color: blank;" +
        " }" +
        "</style>" +
        '</head><body ><table class="excelTable">{table}</table></body></html>';
    if (!tableid.nodeType) tableid = document.getElementById(tableid);
    var ctx = {
        worksheet: sheetName || "Worksheet",
        table: tableid.innerHTML,
    };
    const a = document.getElementById("excelOut");
    a.href = uri + base64(format(template, ctx));
    a.click();
}
</script>

<style lang="less">
.export {
    td {
        border: 2px solid #000000;
    }
}

img {
    width: 100%;
    height: 100px;
}

.el-input__inner {
    font-family: swis;
}

.el-dialog__title {
    font-weight: bold;
}
</style>